<template>
  <div class='questions-list'>
    <!-- 数据统计条数 -->
    <el-alert
      :title="`数据一共${total}条`"
      type="info"
      show-icon
      :closable="false"
    >
    </el-alert>

    <!-- list区域 -->
    <el-table
      :data="dataList"
      style="width: 100%"
    >
      <el-table-column
        prop="number"
        label="试题编号"
      >
      </el-table-column>

      <el-table-column
        prop="subject"
        label="学科"
      >
      </el-table-column>

      <el-table-column
        prop="catalog"
        label="目录"
      >
      </el-table-column>

      <el-table-column label="题型">
        <template slot-scope="scope">
          <span v-if="scope.row.questionType==1">单选</span>
          <span v-else-if="scope.row.questionType==2">多选</span>
          <span v-else>简单</span>
        </template>
      </el-table-column>

      <el-table-column label="题干">
        <template slot-scope="scope">
          <span v-html="scope.row.question"></span>
        </template>
      </el-table-column>

      <el-table-column
        prop="addDate"
        label="录入时间"
      >
        <template slot-scope="scope">
          <span>{{scope.row.addDate | parseTimeByString}}</span>
        </template>
      </el-table-column>

      <el-table-column label="难度">
        <template slot-scope="scope">
          <span v-if="scope.row.difficulty==1">简单</span>
          <span v-else-if="scope.row.difficulty==2">一般</span>
          <span v-else>困难</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="creator"
        label="录入人"
      >
      </el-table-column>

      <el-table-column
        min-width="170px"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-view"
            size="mini"
            @click="onSingleChoiceShow(scope.row)"
          ></el-button>
          <el-button
            type="success"
            icon="el-icon-edit"
            size="mini"
            @click="$router.push({
        path:'/questions/new/',
        query:{
          id:29
        }
      });"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="deleteoperating(scope.row)"
          ></el-button>
          <el-button
            type="warning"
            icon="el-icon-check"
            size="mini"
            @click="addeoperating"
          ></el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="1"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 题目预览弹出层 -->
    <el-dialog
      title="题目预览"
      :visible.sync="previewDialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <preview-singleChoice :previewData="previewData"></preview-singleChoice>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { questionslists } from '@/api/hmmm/questions'
import previewSingleChoice from './preview/preview-singleChoice'
import { remove } from '@/api/hmmm/questions'
export default {
  name: 'questionsList',
  //导入组件
  components: {
    previewSingleChoice,
  },
  //传递数据
  props: {},
  //数据存储
  data() {
    return {
      //列表区域
      queryinfo: {
        query: '',
        page: 1,
        pagesize: 10,
      },
      dataList: [],
      total: 0,
      previewDialogVisible: false, //预览控制显示与与隐藏
      previewData: null, //预览数据
    }
  },
  //事件处理函数
  methods: {
    handleSizeChange(newSize) {
      this.queryinfo.pagesize = newSize
      this.getlist()
    },
    handleCurrentChange(newPage) {
      this.queryinfo.page = newPage
      this.getlist()
    },
    async getlist() {
      const { data } = await questionslists(this.queryinfo)
      console.log(data)
      this.total = data.counts
      this.dataList = data.items
      console.log(this.dataList)
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => { })
    },
    onSingleChoiceShow(item) {
      this.previewDialogVisible = true
      this.previewData = item
    },
    async deleteoperating(item) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        console.log(item.id)
        try {
          await remove({ id: item.id })
          this.$message.success('删除成功')
          this.getlist()
        } catch (err) {
          console.log(err)
          this.$message('删除失败')
        }
      })
    },
    addeoperating() {
      this.$confirm('此操作将题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$message({
          type: 'success',
          message: '添加成功!',
        })
        this.$router.push({
          path: '/questions/choice/',
          query: {
            id: 29
          }
        })
      })
    },
  },
  //事件监听函数
  watch: {},
  //计算属性
  computed: {},
  //生命周期函数
  created() {
    this.getlist()
  },
  mounted() {
    this.$hub.$on('onSearchQuestion', (item) => {
      this.queryinfo = item
      this.getlist()
    })
  },
}
</script>

<style lang='less' scoped>
/deep/.el-alert--info {
  margin-bottom: 15px;
}
</style>